<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="$t('storeManagement.TrafficPacketPurchase')" :navType="search.navType" :bottomBorder="false"
				:navPlaceholder="search.navPlaceholder" :navThmen="search.navThmen" @focusEvent="focusEvent"
				@switchSvgEvent="switchSvgEvent"></c-navigation-bar>
			<view class="setting">
				<view class="surplus">{{$t('storeManagement.CommonTrafficPacket')}}</view>

				<view class="useClass">
					<view class="useBox" v-for="(item, index) in list" :key="index" @click="purchase(item)">
						<view class="all">{{ item.packageContent }}M</view>
						<view class="presenter">{{$t('storeManagement.Presented')}}{{ item.giftData }}M</view>
						<view class="price">${{ Number(item.packagePrice).toFixed(2) }}</view>
						<view class="" style="position: absolute; top: -7px; right: -15px">
							<u-image :src="$u.file.getMedieUrl(item.icon)" width="86" height="58"></u-image>
						</view>
					</view>
				</view>
				<view class="surplus">{{$t('storeManagement.setMeal')}}</view>
				<view class="packageBox">
					<view class="package" v-for="(item, index) in list1" :key="index" @click="purchase(item)">
						<view class="package_top">
							<view class="functionBtn">{{item.packageName}}</view>
							<view class="price">${{Number(item.packagePrice).toFixed(2)}}</view>
						</view>
						<view class="mes">{{item.packageContent}}M</view>
						<view class="mes">{{item.deliveryHomepage}}{{$t('storeManagement.times')}} {{$t('storeManagement.In-station')}}</view>
						<view class="mes">{{item.offStationPlatform}}{{$t('storeManagement.times')}} {{$t('storeManagement.outside')}}</view>
						<view class="mes">{{item.overseasPromotion}}{{$t('storeManagement.times')}} {{$t('storeManagement.overseas')}}</view>
						<view class="btn">{{$t('orderDetails.payment')}}</view>
					</view>
				</view>
				<view class="">
					<u-parse :html="content"></u-parse>
				</view>
			</view>
		</c-layout>
		<!-- 确认购买 -->
		<u-popup v-model="show" mode="bottom" height="638rpx" border-radius="60">
			<view class="popop-box">
				<view class="pay-tittle">{{$t('storeManagement.paymentInformation')}}</view>
				<view class="msg-box">
					<view class="left-box">{{$t('storeManagement.paymentAmount')}}:</view>
					<view class="right-box count-box">$ {{ payMsg.count }}</view>
				</view>
				<view class="msg-box">
					<view class="left-box">{{$t('storeManagement.TrafficPacket')}}:</view>
					<view class="right-box">{{ payMsg.flow }}</view>
				</view>
				<view class="msg-box">
					<view class="left-box">{{$t('storeManagement.TrafficInformation')}}:</view>
					<view class="right-box">{{ payMsg.content }}</view>
				</view>
				<u-button :loading="isloading" type="primary" class="confir-btn" @click="payMent">{{$t('orderDetails.payment')}}</u-button>
			</view>
		</u-popup>
		<u-loading mode="flower" :show="loading" color="#2934D0"></u-loading>
		<!-- 密码 -->
		<inputPayPassword @finish="payPwdPopFinish" :amount="payMsg.count" @close="pwdclose" :payPwdPopShow.sync="payPwdPopShow"
			:maxlength="6"></inputPayPassword>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading:false,
				payPwdPopShow: false,
				loading: false,
				show: false,
				payMsg: {
					count: 29,
					flow: this.$t('storeManagement.CommonTrafficPacket'),
					content: '300MB+10MB'
				},
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle'
				},
				packageId: null, //流量包id
				orderId: null, //下单id
				list: [{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon1.png')
					},
					{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon2.png')
					},
					{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon3.png')
					},
					{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon4.png')
					},
					{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon5.png')
					},
					{
						number: 100,
						presenter: 10,
						price: 29,
						url: require('@/static/images/buyTraffic_icon6.png')
					}
				],
				list1: [],
				content: this.$t('storeManagement.Traffic')
			};
		},
		onLoad() {
			// this.user = this.$store.state.vuex_user_info
		},

		methods: {
			pwdclose(){
				this.isloading=false
				close()
			},
			//输入密码购买
			payPwdPopFinish(val) {
				let data = {
					orderId: this.orderId,
					password: val
				};
				this.$u.post('/app/shop/payDataPackage', data).then((res) => {
					if(res.code==200){
						this.isloading=false
					}
					this.loading = true;
					this.show = false;
					//向后台发起请求 返回订单号
					this.payPwdPopShow = false;
					this.showToast(this.$t('product.purchaseSucceeds'), "default", '/pages/storyType/storeManagement/storeTraffic')

				});
			},

			//下单
			payMent() {
				this.isloading=true
				let shopId = uni.getStorageSync('vuexShopId');
				let data = {
					packageId: this.packageId,
					shopId: shopId
				};
				this.$u.post('/app/shop/buyDataPackage', data).then((res) => {

					this.orderId = res.data
					// this.show = false;

					//向后台发起请求 返回订单号
					this.payPwdPopShow = true;
				});
			},
			//点击商品
			purchase(item) {
				this.payMsg = item.dataType == 0 ? {
						count: Number(item.packagePrice).toFixed(2),
						flow: this.$t('storeManagement.CommonTrafficPacket'),
						content: `${item.packageContent}MB+${item.giftData}MB`
					} : {
						count: Number(item.packagePrice).toFixed(2),
						flow: item.packageName,
						content: `${item.packageContent}MB`
					},
					this.show = true;
				this.packageId = item.id

			},
			getPacList() {
				this.list = []
				this.list1 = []
				this.$u.get('/app/shop/dataPacList').then((res) => {
					res.data.forEach(i => {
						if (i.dataType == 0) {
							this.list.push(i)
						} else {
							this.list1.push(i)
						}
					})
				});
			},
			showToast(tittle, type, url) {
				this.$refs.uToast.show({
					title: tittle,
					type: type,
					url: url
				})
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onLoad() {
			this.getPacList();
		}
	};
</script>

<style lang="scss" scoped>
	.u-size-default[data-v-3bf2dba7] {
		font-size: 15px;
		height: 120rpx;
		width: 100%;
		line-height: 41px;
		background-color: #2934d0;
	}

	.popop-box {
		height: 100%;
		background: #ffffff;
		margin-bottom: 30rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.pay-tittle {
			font-size: 32rpx;
			color: #000000;
		}

		.msg-box {
			display: flex;

			.left-box {
				color: #91909a;
				font-size: 32rpx;
				margin-right: 40rpx;
			}

			.right-box {
				font-size: 36rpx;
				color: #000000;
			}

			.count-box {
				color: #fa6006;
			}
		}
	}

	.modify-page {
		height: 100vh;

		.setting {
			padding: 40rpx;
		}

		.surplus {
			color: #fff;
			justify-content: center;
			margin: 0 auto 50rpx;
			width: 434rpx;
			height: 108rpx;
			border-radius: 32rpx;
			background: #2934d0;
			border: 2rpx solid #e1e8e8;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.settingAside {
			height: 152rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #e1e8e8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 26rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 30rpx;
			box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.functionBtn {
			border-bottom: 1px solid #fff;
			padding-bottom: 4rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.useClass {
			display: flex;
			justify-content: space-between;

			flex-wrap: wrap;

			.useBox {
				width: 47%;
				border-radius: 40rpx;
				color: #fff;
				height: 278rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-bottom: 50rpx;
				background-image: url('@/static/images/buyTraffic_bg.png');
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(254, 142, 114, 0.3);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				flex-wrap: wrap;
				position: relative;

				.all {
					width: 100%;
					text-align: center;
					font-size: 48rpx;
				}

				.presenter {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
				}

				.price {
					width: 188rpx;
					height: 70rpx;
					margin: auto;
					line-height: 70rpx;
					text-align: center;
					background: #ff6666;
					box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
					border-radius: 34rpx;
					font-size: 32rpx;
					opacity: 1;
				}
			}

			.useBox1 {
				background-image: url('@/static/images/storeTraffic5.png');
			}
		}

		.packageBox {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 80rpx 0;

			.package {
				width: 47%;
				height: 448rpx;
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				border: 2rpx solid #e8e6ea;
				background-image: url('@/static/images/buyTraffic_bg1.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				text-align: center;

				.package_top {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					margin-bottom: 50rpx;

					.price {
						font-size: 40rpx;
						color: #fff;
					}
				}

				.mes {
					margin-bottom: 16rpx;
					color: #fff;
					font-size: 28rpx;
				}

				.btn {
					width: 156rpx;
					height: 52rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					opacity: 1;
					text-align: center;
					background: #fff;
					line-height: 52rpx;
					color: #2934d0;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin: 0rpx auto;
				}
			}
		}
	}
</style>